<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 图书馆座位预约系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="login-container">
        <div class="login-card card">
            <div class="login-header">
                <h2><i class="bi bi-person-plus"></i> 用户注册</h2>
                <p class="mb-0">Register</p>
            </div>
            <div class="card-body p-4">
                <form id="registerForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">学号 *</label>
                            <input type="text" class="form-control" id="studentNo" placeholder="学号" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">姓名 *</label>
                            <input type="text" class="form-control" id="name" placeholder="姓名" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">密码 *</label>
                            <input type="password" class="form-control" id="password" placeholder="密码" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">确认密码 *</label>
                            <input type="password" class="form-control" id="confirmPassword" placeholder="确认密码" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">性别</label>
                            <select class="form-select" id="gender">
                                <option value="0">女</option>
                                <option value="1">男</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">联系电话</label>
                            <input type="tel" class="form-control" id="phone" placeholder="联系电话">
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">学院</label>
                        <input type="text" class="form-control" id="college" placeholder="学院">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">专业</label>
                        <input type="text" class="form-control" id="major" placeholder="专业">
                    </div>
                    <button type="submit" class="btn btn-gradient w-100 mb-3">注册</button>
                    <div class="text-center">
                        <a href="/login.html" class="text-decoration-none">已有账号？立即登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script src="/js/request.js"></script>
    <script>
        var layer;
        layui.use('layer', function(){
            layer = layui.layer;
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#registerForm').submit(function(e) {
                e.preventDefault();
                
                const password = $('#password').val();
                const confirmPassword = $('#confirmPassword').val();
                
                if (password !== confirmPassword) {
                    layer.msg('两次密码不一致', {icon: 2});
                    return;
                }

                const data = {
                    studentNo: $('#studentNo').val().trim(),
                    password: password,
                    name: $('#name').val().trim(),
                    gender: parseInt($('#gender').val()),
                    phone: $('#phone').val().trim(),
                    college: $('#college').val().trim(),
                    major: $('#major').val().trim()
                };

                const loadIndex = layer.load(2);
                request.post('/api/user/register', data).then(() => {
                    layer.close(loadIndex);
                    layer.msg('注册成功，请登录', {icon: 1});
                    setTimeout(() => {
                        window.location.href = '/login.html';
                    }, 1500);
                }).catch(() => {
                    layer.close(loadIndex);
                });
            });
        });
    </script>
</body>
</html>

